<template>
  <div :class="{'card':true, 'theme-dark':themeDark}">
    <div class="title">
      <div v-text="title"></div>
      <Icon v-if="isCopy" style="font-size:1.2rem" type="ios-copy-outline"/>
    </div>
    <p class="content">
      <slot></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: "CardPart",
  data() {
    return {};
  },
  props: {
    title: String,
    isCopy: {
      type: Boolean,
      default: false
    },
    themeDark:Boolean,
  }
};
</script>

<style lang="less" scoped>
.card {
  border: 1px solid #ddd;
  //   height: 100px;
  transition: 0.36s all;
  font-size: 1rem;
  .title {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }
  .content {
    padding: 5px;
  }
  &:hover {
    box-shadow: #999 0 0 1px 0px;
  }
}

.theme-dark {
  background: rgb(53, 53, 53);
  color: #fff;
}
</style>